<template>
  <inline-Modal
    :visible="visible"
    title="详情"
    :showOk="false"
    @cancel="handelCancel()"
  >
    <div class="commentPage-container">
      <div class="sub-title">基本信息</div>
      <div class="base-info">
        <a-form-model :model="form">
          <a-row :gutter="20">
            <a-col :span="8">
              <a-form-model-item label="序列号">
                <a-input disabled v-model="form.sort"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="编号">
                <a-input disabled v-model="form.fileCode"> </a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="创建时间">
                <a-input disabled v-model="form.createTime"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="20">
            <a-col :span="8">
              <a-form-model-item label="创建人">
                <a-input disabled v-model="form.creator"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="类别">
                <a-input disabled v-model="form.fileTypeName"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="阅览次数">
                <a-input disabled v-model="form.viewersNumber"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-form-model-item label="文件">
            <bjUploadFile
              :viewMode="true"
              v-model="form.files"
              @preview="viewFile($event)"
              @download="downloadFile($event)"
              :replaceFields="{
                fileName: 'fileName',
                fileSize: 'fileSize',
                fileType: 'fileType',
              }"
            ></bjUploadFile>
          </a-form-model-item>
        </a-form-model>
      </div>
      <div>
        <a-divider />
      </div>
      <div class="sub-title">评论</div>
      <div class="comment-container">
        <div class="mentions-container">
          <a-avatar :size="40" slot="avatar" icon="user" />
          <div class="content">
            <div class="arrow"></div>
            <a-input
              style="width:100%"
              type="textarea"
              rows="3"
              placeholder="评论..."
              v-model="comment.feedbackComment"
            >
            </a-input>
            <div class="action-bar">
              <div class="bar-left">
                <div
                  class="bar-item"
                  @click="handelAddUser()"
                  :class="[isActive && 'active']"
                >
                  @
                </div>
                <div class="bar-item">
                  <icon-font
                    type="icon-fenxiang"
                    @click.stop="hanldeShare()"
                  ></icon-font>
                </div>
                <div class="bar-item">
                  <icon-font type="icon-pingfen"></icon-font>
                  <a-input-number
                    placeholder="请输入评分"
                    v-model="comment.score"
                    :min="0"
                  />
                  <span class="unit">分</span>
                </div>
              </div>
              <div class="release">
                <a-button type="primary" @click="handelRelease()">
                  发布
                </a-button>
              </div>
            </div>
          </div>
        </div>
        <div class="reply-container">
          <div
            class="reply-item"
            v-for="(item, index) in dataSoucre"
            :key="index"
          >
            <a-avatar :size="40" slot="avatar" src="" icon="user" />
            <div class="comment-basic">
              <div class="base-header">
                <div class="name">{{ item.creator }}</div>
                <div class="date-time">{{ item.createTime }}</div>
              </div>
              <div class="base-content">
                {{ item.noticeUserNames }} {{ item.feedbackComment }}
              </div>
              <div class="del" id="delete-container">
                <div class="score">
                  <icon-font type="icon-pingfen"></icon-font>
                  <span>{{ item.score }}分</span>
                </div>
                <a-popconfirm
                  :getPopupContainer="getContainer"
                  title="确定删除该数据吗?删除之后不可恢复!"
                  ok-text="确定"
                  cancel-text="取消"
                  @confirm="handelDelete(item)"
                >
                  <a-icon type="delete" />删除
                </a-popconfirm>
              </div>
              <a-divider />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 附件预览弹窗 -->
    <previewModal
      ref="previewModal"
      :visible.sync="previewModal.visible"
      :loading="previewModal.loading"
    ></previewModal>

    <!-- 选择用户 -->
    <personnel-popup
      ref="PersonnelPopup"
      :multiple="true"
      :whetherShow="false"
      @change="getNewUser"
      @close="handelpersonnelClose()"
      :url="
        '/probusiness/bimMarkMain/getTreeOrganizationAndUserDataByOrgCode?orgCode=' +
          parameter.proCode
      "
    />
    <!-- 分享弹窗 -->
    <shareModal
      :visible.sync="shareScene.visible"
      :uuid="parameter.uuid"
    ></shareModal>
  </inline-Modal>
</template>

<script>
import { Icon } from "ant-design-vue";
import iconfrontjs from "@/assets/IconFont/iconfont.js";
const iconFrontUrl = iconfrontjs;
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: iconFrontUrl,
});
import { mapGetters } from "vuex";
import { getToken } from "@/utils/TopVUI";
import { downloadDfs } from "@/utils/TopVUI";

import bjUploadFile from "@/components/extendCustom/bj-upload-file";
//预览
import previewModal from "@/pages/document/minio/previewModal";
//人员
import { PersonnelPopup } from "@/components";
//分项弹窗
import shareModal from "./components/shareModal.vue";
import {
  addExperienceFeedback,
  pageExperienceFeedback,
  experienceViewers,
  deleteCommentExperience,
} from "@/api/knowledgeBase";
export default {
  components: {
    IconFont,
    bjUploadFile,
    previewModal,
    PersonnelPopup,
    shareModal,
  },
  props: {
    visible: {
      type: Boolean,
      required: false,
    },
    parameter: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    ...mapGetters(["configData"]),
    kkFileView() {
      let index = this.configData.findIndex(
        (item) => item.code === "kkFileView"
      );
      if (index >= 0) {
        return this.configData[index].value;
      } else {
        return "http://192.168.1.216:8012/onlinePreview";
      }
    },
  },

  data() {
    return {
      form: {
        sort: "",
        fileCode: "",
        createTime: "",
        creator: "",
        fileTypeName: "",
        files: [],
        viewersNumber: "",
      },
      //预览
      previewModal: {
        visible: false,
        loading: false,
      },
      isActive: false,
      //评论
      comment: {
        noticeUserIds: "",
        feedbackComment: "",
        score: "",
      },
      dataSoucre: [],
      //分享弹窗
      shareScene: {
        visible: false,
      },
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          Promise.all([
            this.getData(),
            this.getNumber(),
            this.getCommentData(),
          ]);
        }
      },
      immediate: true,
    },
  },
  methods: {
    // 删除
    handelDelete(item) {
      deleteCommentExperience({ uuid: item.uuid })
        .then((res) => {
          if (res.statusCode === 200 || res === 1) {
            this.getCommentData();
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((_) => {});
    },

    //记录浏览次数
    getNumber() {
      return new Promise((resolve, reject) => {
        let { uuid } = this.parameter;
        experienceViewers({ uuid })
          .then((res) => {
            resolve();
          })
          .catch((_) => {
            reject();
          });
      });
    },
    //分项
    hanldeShare() {
      console.log(132);
      this.shareScene.visible = true;
    },

    //预览
    viewFile(file) {
      let { url } = file;
      this.previewModal.loading = true;
      this.$refs.previewModal.type = "file";
      this.$refs.previewModal.fileUrl =
        this.kkFileView +
        "/onlinePreview?url=" +
        encodeURIComponent(Base64.encode(url)) +
        "&watermarkTxt=" +
        //水印内容
        encodeURIComponent("") +
        "&token=" +
        getToken();
      this.previewModal.visible = true;
      this.previewModal.loading = false;
    },
    downloadFile(row) {
      let { url } = row;
      if (!url) {
        this.$message.success("文件不存在", 1.5);
        return;
      }
      downloadDfs(url);
    },
    //选择人员
    handelAddUser() {
      this.isActive = true;
      this.$refs.PersonnelPopup.openModal();
    },
    handelpersonnelClose() {
      this.isActive = false;
    },
    getNewUser(ids, data = []) {
      this.isActive = false;
      this.comment.noticeUserIds = ids;
      let userName = [];
      userName = data.map((v) => "@" + v.userNameAndId + " ");
      userName = userName.filter((v) => v).toString();
      if (this.comment.feedbackComment.includes(userName)) {
        return;
      }
      this.comment.feedbackComment = this.comment.feedbackComment + userName;
    },

    //发布
    handelRelease() {
      let { uuid } = this.parameter;
      let { feedbackComment, noticeUserIds = "", score } = this.comment;

      if (!feedbackComment) {
        this.$message.warning("请输入评论");
        return;
      }
      addExperienceFeedback({
        fileUuid: uuid,
        feedbackComment,
        noticeUserIds,
        score,
      })
        .then((res) => {
          if (res.statusCode === 200 || res === 1) {
            this.resetForm();
            this.getCommentData();
          } else {
            this.$message.error(res?.message ?? "操作失败");
          }
        })
        .catch((_) => {});
    },

    getData() {
      let { parameter } = this;
      this.form = {
        sort: parameter.sort,
        fileCode: parameter.fileCode,
        createTime: parameter.createTime,
        creator: parameter.creator,
        fileTypeName: parameter.fileTypeName,
        viewersNumber: parameter.viewersNumber,
        files: [],
      };
      let list = JSON.parse(parameter.fileAddress ?? "[]");
      list.forEach((item) => {
        let lastIdx = item.name.lastIndexOf(".");
        let fileType = "." + item.name.substring(lastIdx + 1);
        this.form.files.push({
          fileName: item.name,
          fileType: fileType,
          url: item.url,
        });
      });
    },

    getCommentData() {
      return new Promise((resolve, reject) => {
        let { uuid } = this.parameter;
        pageExperienceFeedback({ fileUuid: uuid })
          .then((res) => {
            this.dataSoucre = res ?? [];
            resolve();
          })
          .catch((_) => {
            this.dataSoucre = [];
            reject();
          });
      });
    },

    resetForm() {
      this.comment = {
        noticeUserIds: "",
        feedbackComment: "",
        score: "",
      };
    },

    handelCancel() {
      this.$parent.getTreeData();
      this.$emit("update:visible", false);
    },
    getContainer() {
      return document.getElementById("delete-container");
    },
  },
};
</script>

<style lang="less" scoped>
.commentPage-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  .sub-title {
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    color: #111111;
    padding: 0 0 10px 22px;
  }
  .base-info {
    padding: 0 120px 0 10px;
    /deep/.bj-upload-file .choosed-file-warp {
      width: 100%;
      overflow: hidden;
    }
  }
  .comment-container {
    flex: 1;
    padding: 0 22px;
    box-sizing: border-box;
    .mentions-container {
      display: flex;
      background: #f7f7f7;
      border-radius: 4px 4px 4px 4px;
      padding: 24px;
      box-sizing: border-box;
      position: relative;
      margin-bottom: 20px;
      .content {
        flex: 1;
        padding-left: 16px;
        .arrow {
          position: absolute;
          transform: rotate(45deg);
          width: 16px;
          height: 16px;
          background: #ffffff;
          border: 1px solid #d9d9d9;
          z-index: 22;
          top: 38px;
          left: 73px;
          border-top: 0;
          border-right: 0;
        }
        /deep/.ant-input {
          margin-bottom: 16px;
        }
        /deep/.ant-input:hover,
        .ant-input:focus {
          border-color: #d9d9d9;
          box-shadow: none;
        }
        .action-bar {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 20px;
          color: #666666;
          .bar-left {
            display: flex;
            align-items: center;
            .bar-item {
              cursor: pointer;
              display: flex;
              align-items: center;
              padding: 0 20px;
              position: relative;
              &.active {
                color: #1677ff;
              }
              &::after {
                content: "";
                width: 1px;
                height: 16px;
                background: #bfbfbf;
                border-radius: 0px 0px 0px 0px;
                position: absolute;
                right: 0;
              }
              .unit {
                margin-left: 4px;
                font-size: 14px;
              }
              /deep/.ant-input {
                margin-bottom: 0;
              }
              &:first-of-type {
                padding-left: 0;
              }
              &:last-of-type {
                .anticon {
                  margin-right: 16px;
                }
                /deep/.ant-input {
                  margin-right: 16px;
                }
                &::after {
                  display: none;
                }
              }
            }
          }
        }
      }
    }
    .reply-container {
      display: flex;
      flex-direction: column;
      .reply-item {
        display: flex;
        .comment-basic {
          padding-left: 16px;
          flex: 1;
          .base-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-weight: 400;
            .name {
              font-size: 16px;
              color: #333333;
            }
            .date-time {
              font-size: 14px;
              color: #999999;
            }
          }
          .base-content {
            padding: 4px 0;
            font-weight: 400;
            font-size: 14px;
            color: #666666;
            word-break: break-all;
          }
          .del {
            display: flex;
            align-items: center;
            cursor: pointer;
            .score {
              position: relative;
              padding-right: 16px;
              .anticon {
                margin-right: 16px;
              }
              &::after {
                content: "";
                width: 1px;
                height: 16px;
                background: #bfbfbf;
                border-radius: 0px 0px 0px 0px;
                position: absolute;
                right: 0;
                top: 4px;
              }
            }
            .anticon-delete {
              padding-left: 16px;
              margin-right: 8px;
            }
          }
        }
      }
    }
  }

  /deep/.ant-divider {
    margin: 16px 0;
  }
  /deep/.ant-form-item {
    display: flex;
    .ant-form-item-label {
      flex-shrink: 0;
      width: 102px;
      white-space: pre-wrap;
      display: flex;
      justify-content: flex-end;
      line-height: 20px;
      margin-right: 2px;
      align-items: center;
    }
    .ant-form-item-control-wrapper {
      flex: 1;
    }
  }
}
</style>
